<!-- Copyright 2019 The Chromium Authors. All rights reserved.
  -- Use of this source code is governed by a BSD-style license that can be
  -- found in the LICENSE file.
  -->

<style>
  :host([hidden]) {
    display: none;
  }

  :host {
    border-bottom: 1px solid var(--google-grey-300);
    color: var(--cr-primary-text-color);
    display: flex;
    height: 36px;
    justify-content: space-between;
    padding: 5px 0;
    white-space: nowrap;
  }

  cr-icon-button:not([iron-icon]) {
    margin: 0;
    visibility: hidden;
    width: 16px;
  }

  cr-icon-button[iron-icon] {
    margin: 0 8px;
  }

  cr-icon-button[role=img] {
    --iron-icon-fill-color: var(--google-red-600);
    pointer-events: none;
  }

  #text[aria-label]::after {
    content: attr(aria-label);
  }

  #text[aria-label] {
    margin-inline-end: 8px;
  }

  #dismiss:not([aria-label]),
  #action:not([aria-label]) {
    display: none;
  }

  #dismiss[aria-label]::after,
  #action[aria-label]::after {
    content: attr(aria-label);
  }

  #dismiss,
  #action {
    padding: 0 calc(12px - 1px);
  }
</style>

<div role='alert'>
  <cr-icon-button id='icon'></cr-icon-button>
  <span id='text'></span>
</div>
<div>
  <cr-button id='dismiss'></cr-button>
  <cr-button id='action'></cr-button>
  <cr-icon-button id='close'></cr-icon-button>
</div>
